<template>
    <div id="index">
        <div class="video-box inline">
            <div>
                <p class="v-title">Statistics</p>
                <div class="v-box">
                    <div>
                        <div class="inline">
                            <p class="font1">视频系统</p>
                            <p class="font2">新增视频数</p>
                            <p class="font3">1,170</p>
                        </div>
                        <div class="v-box-right inline">
                            <div id="main" class="video-echart"></div>
                            <div class="zs">
                                <img src="../assets/index/zs.png" alt="">
                            </div>
                            <div class="v-right-bottom">
                                <img src="../assets/index/arrow.png" alt="">
                                <span class="font1">10%</span>
                            </div>
                        </div>
                    </div>
                    <p class="font4">Compared to 11,705 last year</p>
                    <div class="v-msg-box">
                        <div class="inline">
                            <p class="font6">教学视频</p>
                            <p class="font7">12,875</p>
                        </div>
                        <div class="inline">
                            <p class="font6">浏览量</p>
                            <p class="font7">136,350</p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="test-box inline">
                    <table>
                        <tr>
                            <th style="font-weight: bold;">考试系统</th>
                            <th style="color:#9292C1;text-align:center;">考生</th>
                            <th>正确率</th>
                        </tr>
                        <tr v-for="i in testList" :key="i">
                            <td>{{i.sysname}}</td>
                            <td style="color:#9292C1;text-align:center;">{{i.stunum}}</td>
                            <td class="t-img">
                                {{i.rightrate}}
                                <img src="../assets/index/arrow-test.png" alt="" v-if="i.rise == false" class="right">
                                <img src="../assets/index/arro.png" alt="" v-else class="right">
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="charttable1-box inline">
                    <div>
                        <div class="btn-box inline">
                            <img src="../assets/index/Vector.png" alt="">
                        </div>
                        <div class="inline">
                            <p class="font8">攻防赛</p>
                            <p class="font9">43场</p>
                        </div>
                        <div class="inline" id="main2">

                        </div>
                    </div>
                    <div>
                        <div class="btn-box inline">
                            <img src="../assets/index/Icon.png" alt="">
                        </div>
                        <div class="inline">
                            <p class="font8">参赛队伍</p>
                            <p class="font9">36支</p>
                        </div>
                        <div class="inline" id="main3"></div>
                    </div>
                    <div>
                        <div class="btn-box inline">
                            <img src="../assets/index/pin.png" alt="">
                        </div>
                        <div class="inline">
                            <p class="font8">晋级率</p>
                            <p class="font9">68.5%</p>
                        </div>
                        <div class="inline" id="main4"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="middle-box inline">
            <div style="text-align:center">
                <p class="middle-title">Data screen</p>
            </div>
            <div class="middle-bubble">
                <div class="middle-tabList">
                    <div class="mb-backcircle">
                        <ul>
                            <li>比赛</li>
                            <li>视频</li>
                            <li class="licheck">实操</li>
                            <li>考试</li>
                            <li>ALL</li>
                        </ul>
                        <div class="mb2-backcircle">
                            <div class="mb2-b1">
                                <p class="p1">密码学</p>
                                <img src="../assets/index/foot.png" alt="" class="p2"><span class="p3">6,644</span>
                                <p class="p4">3 month</p>
                            </div>
                            <div class="mb2-b2">
                                <p class="p1">操作系统</p>
                                <img src="../assets/index/foot.png" alt="" class="p2"><span class="p3">2,982</span>
                                <p class="p4">3 month</p>
                            </div>
                            <div class="mb2-b3">
                                <p class="p1">企业防火墙</p>
                                <img src="../assets/index/foot.png" alt="" class="p2"><span class="p3">1,657</span>
                            </div>
                            <div class="mb2-b4">
                                <p class="p1">渗透测试</p>
                                <img src="../assets/index/foot.png" alt="" class="p2"><span class="p3">657</span>
                            </div>
                            <div class="mb2-b5">
                                <p class="p1">网络通信</p>
                                <img src="../assets/index/foot.png" alt="" class="p2"><span class="p3">1,987</span>
                            </div>
                            <div class="mb2-b6"></div>
                            <div class="mb2-b7"></div>
                            <div class="mb2-b8"></div>
                            <div class="mb2-b9 po9"></div>
                            <div class="mb2-b9 po10"></div>
                            <div class="mb2-b10"></div>
                            <div class="mb2-b11 po11"></div>
                            <div class="mb2-b11 po12"></div>
                            <div class="mb2-b11 po13"></div>
                            <div class="mb2-b11 po14"></div>
                            <div class="mb2-b12 po1"></div>
                            <div class="mb2-b12 po2"></div>
                            <div class="mb2-b12 po3"></div>
                            <div class="mb2-b12 po4"></div>
                            <div class="mb2-b12 po5"></div>
                            <div class="mb2-b12 po6"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle-bottom">
                <div class="middle-bottom-position">
                    <div class="middle-btn-box inline">
                        <div class="middle-btn">
                            <img src="../assets/index/Vector.png" alt="">
                        </div>
                        <p class="m-title">教学类目</p>
                        <p class="m-nums">204</p>
                    </div>
                    <div class="middle-btn-box inline">
                        <div class="middle-btn">
                            <img src="../assets/index/Icon.png" alt="">
                        </div>
                        <p class="m-title">实验室浏览量</p>
                        <p class="m-nums">65,540</p>
                    </div>
                    <div class="middle-btn-box inline">
                        <div class="middle-btn">
                            <img src="../assets/index/pin.png" alt="">
                        </div>
                        <p class="m-title">实验环境</p>
                        <p class="m-nums">325</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="doing-box inline">
            <p class="font10">实操平台</p>
            <span class="font11 inline">64,3</span><span class="font12 inline">%</span>
            <p class="font13">连续6个月综合错误率下降11.8%</p>
            <div id="main5"></div>
            <div>
                <div class="m-box">
                    <span class="font14">1月实验错误率</span>
                    <span class="font15">72.3%</span>
                    <div id="main6" class="inline"></div>
                </div>
                <div class="m-box">
                    <span class="font14">2月实验错误率</span>
                    <span class="font15">75.5%</span>
                    <div id="main7" class="inline"></div>
                </div>
                <div class="m-box">
                    <span class="font14">3月实验错误率</span>
                    <span class="font15">70.8%</span>
                    <div  id="main8" class="inline"></div>
                </div>
                <div class="m-box">
                    <span class="font14">4月实验错误率</span>
                    <span class="font15">65.8%</span>
                    <div id="main9" class="inline"></div>
                </div>
                <div class="m-box">
                    <span class="font14">5月实验错误率</span>
                    <span class="font15">64.8%</span>
                    <div id="main10" class="inline"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    mounted() {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 80,
                            itemStyle: {
                                borderRadius: 10,
                                color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#E323FF'},
                                    {offset: 1, color: '#7517F8'}
                                ]
                            )},
                        },
                        {
                            value: 20,
                            name: '',
                            itemStyle: {
                                color: '#191932'
                            },
                        }
                    ]
                },
                {
                    type: 'pie',
                    radius: ['90%', '100%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 10,
                            name: '',
                            itemStyle: {
                                color: '#191932'
                            },
                        },
                        {
                            value: 60,
                            itemStyle: {
                                borderRadius: 10,
                                color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#4DFFDF'},
                                    {offset: 1, color: '#4DA1FF'}
                                ]
                            )}
                        },
                        {
                            value: 10,
                            name: '',
                            itemStyle: {
                                color: '#191932'
                            },
                        },
                        {
                            value: 30,
                            itemStyle: {
                                borderRadius: 10,
                                color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#FFD422'},
                                    {offset: 1, color: '#FF7D05'}
                                ]
                            ),
                            }
                        }
                    ]
                }
            ]
        })

        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption({
            tooltip: {},
            xAxis: {
                show: false,
                type: 'value',
                min: 0,
                max: 10
            },
            yAxis: {
                data: ["", "", ""],
                show: false,
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [{
                type: 'bar',
                data: [5, 8, 6],
                barWidth: 6,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(37, 36, 93, 1)',
                    borderRadius: [4, 4, 4, 4]
                },
                itemStyle: {
                    borderRadius: [4, 4, 4, 4],
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: '#4DFFDF'},
                            {offset: 1, color: '#4DA1FF'}
                        ]
                    )
                },
                barCategoryGap: "100%",
            }]
        })

        var myChart3 = echarts.init(document.getElementById('main3'));
        myChart3.setOption({
            xAxis: {
                type: 'value',
                show: false,
                max:50
            },
            grid:{
                  x:10,
                  y:20,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            yAxis: {
                type: 'category',
                data: [''],
                show: false,
            },
            series: [
            {
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [26],
                barWidth: 8,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(37, 36, 93, 1)',
                    borderRadius: [4, 4, 4, 4]
                },
                itemStyle: {
                    borderRadius: [4, 4, 4, 4],
                    color: new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [
                        {offset: 0, color: '#E323FF'},
                        {offset: 1, color: '#7517F8'}
                    ]
                )
                },
            },
            {
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [10],
                barWidth: 8,
                itemStyle: {
                    borderRadius: [4, 4, 4, 4],
                    color: new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [
                        {offset: 0, color: '#4DFFDF'},
                        {offset: 1, color: '#4DA1FF'}
                    ]
                )
                },
            }]
        })

        // 基于准备好的dom，初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('main4'));
        // 绘制图表
        myChart4.setOption({
            tooltip: {},
            xAxis: {
                data: ["", "", "", "", "", "", "", "", "", ""],
                show: false,
            },
            yAxis: {
                show: false,
                min: 0,
                max: 10
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [{
                type: 'bar',
                data: [5, 8, 5, 6, 7, 5, 4, 5, 3, 9],
                barWidth: 6,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(37, 36, 93, 1)',
                    borderRadius: [4, 4, 4, 4]
                },
                itemStyle: {
                    borderRadius: [4, 4, 4, 4],
                    color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#4DFFDF'},
                        {offset: 1, color: '#4DA1FF'}
                    ]
                )
                },
                barCategoryGap: "39%",
            }]
        });

        var myChart5 = echarts.init(document.getElementById('main5'));
        myChart5.setOption({
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','','']
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [{
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 12, 31, 24, 10, 12, 21, 10],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4DFFDF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#4DA1FF' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 4
                }
            },
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#E323FF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#7517F8' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 4
                }
            },]
        })

        var myChart6 = echarts.init(document.getElementById('main6'));
        myChart6.setOption({
            backgroundColor: '#05050F',
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','',''],
                splitLine: { //网格线
                    show: true,
                    lineStyle:{
                        color: ['#1F1F4B'],
                        width: 3,
                        type: 'solid'
                    },
                    interval: 1
                },
                
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#E323FF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#7517F8' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 3
                }
            }]
        })

        var myChart7 = echarts.init(document.getElementById('main7'));
        myChart7.setOption({
            backgroundColor: '#05050F',
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','',''],
                splitLine: { //网格线
                    show: true,
                    lineStyle:{
                        color: ['#1F1F4B'],
                        width: 3,
                        type: 'solid'
                    },
                    interval: 1
                },
                
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#8AFF6C' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#02C751' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 3
                }
            }]
        })

        var myChart8 = echarts.init(document.getElementById('main8'));
        myChart8.setOption({
            backgroundColor: '#05050F',
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','',''],
                splitLine: { //网格线
                    show: true,
                    lineStyle:{
                        color: ['#1F1F4B'],
                        width: 3,
                        type: 'solid'
                    },
                    interval: 1
                },
                
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#FFD422' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#FF7D05' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 3
                }
            }]
        })

        var myChart9 = echarts.init(document.getElementById('main9'));
        myChart9.setOption({
            backgroundColor: '#05050F',
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','',''],
                splitLine: { //网格线
                    show: true,
                    lineStyle:{
                        color: ['#1F1F4B'],
                        width: 3,
                        type: 'solid'
                    },
                    interval: 1
                },
                
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#516DFF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#091EDC' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 3
                }
            }]
        })

        var myChart10 = echarts.init(document.getElementById('main10'));
        myChart10.setOption({
            backgroundColor: '#05050F',
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['','','','','','','',''],
                splitLine: { //网格线
                    show: true,
                    lineStyle:{
                        color: ['#1F1F4B'],
                        width: 3,
                        type: 'solid'
                    },
                    interval: 1
                },
                
            },
            yAxis: {
                type: 'value',
                splitLine: { //网格线
                    show: false
                },
            },
            grid:{
                  x:0,
                  y:0,
                  x2:0,
                  y2:0,
                  borderWidth:10
	        },
            series: [
            {
                type: 'line',
                smooth: true,
                symbol: "none",
                data: [10, 10, 12, 21, 34, 30, 10, 12],
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#FF7D05' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#EC411C' // 100% 处的颜色
                        }],
                        global: false,// 缺省为 false
                    },
                    width: 3
                }
            }]
        })
    },
    data(){
        return {
            testList:[
                {
                    sysname:'内网渗透',
                    stunum:650,
                    rightrate:'66%',
                    rise:false
                },
                {
                    sysname:'WEB渗透',
                    stunum:612,
                    rightrate:'67.5%',
                    rise:false
                },
                {
                    sysname:'网络通信',
                    stunum:598,
                    rightrate:'89.3%',
                    rise:false
                },
                {
                    sysname:'企业等保',
                    stunum:513,
                    rightrate:'78.6%',
                    rise:true
                },
                {
                    sysname:'企业防火墙',
                    stunum:498,
                    rightrate:'83.5%',
                    rise:false
                }
            ]
        }
    }
}
</script>
<style>
#index{
    padding:34px 70px;
    background-color: #05050F;
}

.video-box .v-title{
    color: white;
    font-size: 29px;
    font-weight: bold;
    font-family: Open Sans;
    font-style: normal;
    letter-spacing: -0.3685px;
}

.video-box .v-box{
    width: 460px;
    height: 490px;
    background-color: #531D9C;
    border-radius: 16px;
    margin-top: 8px;
    padding: 31px 50px;
    box-sizing: border-box;
    color: white;
}

.video-box .v-box .font1{
    font-size: 31px;
    letter-spacing: 1px;
    margin-bottom: 44px;
}

.video-box .v-box .font2{
    font-size: 25px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.video-box .v-box .font3{
    font-size: 53px;
    letter-spacing: -1px;
    margin-bottom: 10px;
    font-weight: bold;
}

.video-box .font4{
    opacity: 0.6;
    font-size: 19px;
}

.video-box .video-echart{
    width: 150px;
    height: 166px;
}

.video-box .v-box-right{
    position: relative;
}

.video-box .v-box-right .zs{
    width: 59px;
    height: 59px;
    border-radius: 29.5px;
    padding-top: 18px;
    box-sizing: border-box;
    background-color: #05050F;
    text-align: center;
    position: absolute;
    top: 53px;
    left: 86px;
}

.video-box .v-box-right #main{
    margin-left: 40px;
}

.video-box .v-box-right .font1{
    color: #5EFF5A;
    font-size: 22px;
}

.video-box .v-box-right .v-right-bottom{
    margin-left: 80px;
}

.video-box .v-msg-box{
    width: 100%;
    height: 144px;
    background-color: #3F1578;
    margin-top: 44px;
    border-radius: 10px;
    padding: 32px 47px;
    box-sizing: border-box;
}

.video-box .v-msg-box div{
    width: 133px;
}

.video-box .v-msg-box .font6{
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.video-box .v-msg-box .font7{
    font-size: 32px;
    font-weight: bold;
}

.test-box{
    width: 228px;
    /* height: 193px; */
    background: #191932;
    margin-top: 38px;
    border-radius: 8px;
    color: white;
    padding: 8px 18px;
    box-sizing: border-box;
}

.test-box table{
    width: 100%;
}

.test-box tr{
    height:28px;
    font-size: 12px;
    text-align: left;
}

.test-box tr td,th{
    width: 33%;
}

.test-box tr .t-img img{
    margin-top: 5px;
}

.charttable1-box{
    margin: 41px 0 0 13px;
    color: white;
}

.charttable1-box .btn-box{
    width: 46px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #363661;
    text-align: center;
    margin-bottom: 24px;
}

.charttable1-box .btn-box img{
    margin-top: calc(23px - 10px);
}

.charttable1-box .font8{
    font-size: 16px;
    margin-left: 12px;
}

.charttable1-box .font9{
    font-size: 24px;
    font-weight: bold;
    margin-left: 12px;
}

#main4{
    height: 47px;
    width: 130px;
    margin-left: 14px;
}

.middle-box{
    width: 840px;
    margin-right: 18px;
}

.middle-box .middle-title{
    color: #3D3D60;
    font-size: 13px;
    letter-spacing: 6px;
}

.middle-box .middle-tabList{
    margin-top: 12px;
    text-align: center;
}

.middle-box .middle-tabList li{
    color: white;
    list-style-type: none;
    display: inline-block;
    width: 66px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    margin:0 13px;
}

.licheck{
    background-color: #072FBE;
}

.middle-box .middle-btn-box{
    width: 33.3%;
    color: white;
    text-align: center;
}

.middle-box .middle-btn-box .middle-btn{
    width: 39px;
    height: 39px;
    border-radius: 7px;
    border: 2px solid #363661;
    margin: 19px auto;
    text-align: center;
}

.middle-box .middle-btn-box .middle-btn img{
    width: 16px;
    margin-top: calc(39px/2 - 8px);
}

.middle-box .middle-btn-box .m-title{
    color: #5A5A89;
    font-size: 9px;
    margin-bottom: 20px;
}

.middle-box .middle-btn-box .m-nums{
    font-size: 50px;
    font-weight: bold;
}

.middle-box .mb-backcircle{
    width: 652px;
    height: 652px;
    border: 0.8375px solid #252545;
    border-radius: 326px;
    margin: 0 auto;
    padding-top: 12px;
    box-sizing: border-box;
}

.middle-box .mb2-backcircle{
    width: 542px;
    height: 542px;
    border: 0.8375px solid #252545;
    border-radius: 271px;
    margin: 0 auto;
    position: relative;
}

.middle-box .mb2-backcircle div{
    position: absolute;
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 3s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 3s;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}

@keyframes breath {
    from { opacity: 0.7; transform: scale(0.9)}                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; transform: scale(1)}                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.7; transform: scale(0.9)}                          /* 动画结束时的不透明度 */    
}
 
@-webkit-keyframes breath {
    from { opacity: 0.7; transform: scale(0.9)}                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; transform: scale(1)}                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.7; transform: scale(0.9)}                          /* 动画结束时的不透明度 */
}

.mb2-b1{
    width: 210px;
    height: 210px;
    border-radius: 105px;
    top: 166px;
    left: 172px;
    padding-top: 82px;
    box-sizing: border-box;
    text-align: center;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 0px 16.75px rgba(255, 147, 147, 0.13), 50.25px 100.5px 67px rgba(5, 0, 255, 0.2), 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0000;
}

.mb2-b1 .p1,.mb2-b2 .p1{
    font-size: 13px;
    color: white;
    margin-bottom: 3px;
}

.mb2-b1 .p2,.mb2-b2 .p2{
    width: 16px;
    margin-right: 4px;
}

.mb2-b1 .p3,.mb2-b2 .p3{
    font-size: 17px;
    color: white;
    font-weight: bold;
}

.mb2-b1 .p4,.mb2-b2 .p4{
    font-size: 12px;
    color: white;
    color: #7878B6;
}

.mb2-b2{
    width: 146px;
    height: 146px;
    border-radius: 73px;
    padding-top: 46px;
    top: 350px;
    left: 54px;
    box-sizing: border-box;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;    
}

.mb2-b3{
    width: 120px;
    height: 120px;
    border-radius: 60px;
    padding-top: 42.5px;
    top: 134px;
    left: 28px;
    box-sizing: border-box;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.mb2-b3 .p1,.mb2-b4 .p1,.mb2-b5 .p1{
    font-size: 10px;
    color: white;
}

.mb2-b3 .p2,.mb2-b4 .p2,.mb2-b5 .p2{
    width: 12px;
    margin-right: 3px;
}

.mb2-b3 .p3,.mb2-b4 .p3,.mb2-b5 .p3{
    font-size: 13px;
    color: white;
}

.mb2-b4{
    width: 120px;
    height: 120px;
    border-radius: 60px;
    padding-top: 42.5px;
    top: 30px;
    left: 280px;
    box-sizing: border-box;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.mb2-b5{
    width: 100px;
    height: 100px;
    padding-top: 31px;
    top: 210px;
    left: 408px;
    box-sizing: border-box;
    border-radius: 50px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.mb2-b6{
    width: 74px;
    height: 74px;
    border-radius: 37px;
    top: 90px;
    left: 168px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 41.875px #FF0505;
}

.mb2-b7{
    width: 52px;
    height: 52px;
    border-radius: 26px;
    top: 158px;
    left: 374px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 25.125px #FF0505;
}

.mb2-b8{
    width: 50px;
    height: 50px;
    top: 275px;
    left: 106px;
    border-radius: 25px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 41.875px #FF0505;
}

.mb2-b9{
    width: 84px;
    height: 84px;
    border-radius: 42px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.po9{
    top: 272px;
    left: -26px;
}

.po10{
    top: 240px;
    left: 532px;
}

.mb2-b10{
    width: 98px;
    height: 98px;
    border-radius: 49px;
    top: 380px;
    left: 306px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.mb2-b11{
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px rgba(248, 0, 119, 0.48), inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 16.75px 83.75px #FF0505;
}

.po11{
    top:104px;
    left: 124px;
}

.po12{
    top:162px;
    left: 456px;
}

.po13{
    top:334px;
    left: 396px;
}

.po14{
    top:392px;
    left: 4px;
}

.mb2-b12{
    background: radial-gradient(96% 96% at 70.4% 31.2%, #3244E8 0%, rgba(0, 2, 16, 0) 100%), #030092;
    box-shadow: 0px 3.35px 67px #2300F8, inset 0px 1.675px 8.375px rgba(255, 255, 255, 0.58), inset 8.375px 13.4px 16.75px rgba(130, 5, 255, 0.95);
}

.po1{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 38px;
    left: -150px;
}

.po2{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    top: 196px;
    left: -52px;
}

.po3{
    width: 54px;
    height: 54px;
    border-radius: 27px;
    top: 271px;
    left: -122px;
}

.po4{
    width: 52px;
    height: 52px;
    border-radius: 26px;
    top: 466px;
    left: -102px;
}

.po5{
    width: 88px;
    height: 88px;
    border-radius: 44px;
    top: 48px;
    left: 594px;
}

.po6{
    width: 51px;
    height: 51px;
    border-radius: 25.5px;
    top: 380px;
    left: 598px;
}

.middle-box .middle-bottom{
    position: relative;
    height: 140px;
}

.middle-box .middle-bottom-position{
    position: absolute;
    width: 100%;
    top: -78px;
}

.doing-box{
    width: 376px;
    padding: 31px 8px 31px 35px;
    background: #1F1F4B;
    border-radius:16px;
    color: white;
    box-sizing: border-box;
    margin-top: 34px;
}

.doing-box .font10{
    font-size: 31px;
    margin-bottom: 42px;
}

.doing-box .font11{
    font-size: 75px;
    font-weight: bold;
}

.doing-box .font12{
    font-size: 37px;
    font-weight: bold;
    line-height: 72px;
}

.doing-box .font13{
    font-size: 20px;
    opacity: 0.6;
    line-height: 26px;
    margin-bottom: 50px;
}

.doing-box .font14{
    font-size: 22px;
    margin-right: 18px;
}

.doing-box .font15{
    font-size: 22px;
    color: #9292C1;
    margin-right: 18px;
}

.doing-box .m-box{
    margin-bottom: 18px;
}

#main5{
    width: 304px;
    height: 116px;
    margin-bottom: 70px;
}

#main6,#main7,#main8,#main9,#main10{
    width: 76px;
    height: 32px;
}

#main2{
    width: 108px;
    height: 46px;
    margin-left: 14px;
}

#main3{
    width: 150px;
    height: 32px;
}
</style>